





{% assign pay_id = pay_block_id | default :'0' %}

{%- if payment.interface_type == 'jhpay' -%}
<style>.paypal-button-container .xcomponent-outlet{z-index:1;}.paypal-button-container{width: 100% !important;}</style>
{% comment %} <div id="paypal-button-container-{{pay_id}}" class="paypal-button-container"></div> {% endcomment %}
<a href="javascript:;" class="paypal_checkout_button" id="paypal_checkout_button-{{pay_id}}">
  <img class="paypal-button-logo paypal-button-logo-pp paypal-button-logo-gold" src="" alt="pp" style="visibility: visible;">
  <img class="paypal-button-logo paypal-button-logo-paypal paypal-button-logo-gold" src=" xNyA2LjcgMTkuMzE3IDcuMyAxOS4zMTcgTCA5LjggMTkuMzE3IEMgMTQuOSAxOS4zMTcgMTcuOSAxNi44MTcgMTguNyAxMS45MTcgQyAxOSA5LjgxNyAxOC43IDguMTE3IDE3LjcgNi45MTcgQyAxNi42IDUuNjE3IDE0LjYgNC45MTcgMTIgNC45MTcgWiBNIDEyLjkgMTIuMjE3IEMgMTIuNSAxNS4wMTcgMTAuMyAxNS4wMTcgOC4zIDE1LjAxNyBMIDcuMSAxNS4wMTcgTCA3LjkgOS44MTcgQyA3LjkgOS41MTcgOC4yIDkuMzE3IDguNSA5LjMxNyBMIDkgOS4zMTcgQyAxMC40IDkuMzE3IDExLjcgOS4zMTcgMTIuNCAxMC4xMTcgQyAxMi45IDEwLjUxNyAxMy4xIDExLjIxNyAxMi45IDEyLjIxNyBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwMzA4NyIgZD0iTSAzNS4yIDEyLjExNyBMIDMxLjUgMTIuMTE3IEMgMzEuMiAxMi4xMTcgMzAuOSAxMi4zMTcgMzAuOSAxMi42MTcgTCAzMC43IDEzLjYxNyBMIDMwLjQgMTMuMjE3IEMgMjkuNiAxMi4wMTcgMjcuOCAxMS42MTcgMjYgMTEuNjE3IEMgMjEuOSAxMS42MTcgMTguNCAxNC43MTcgMTcuNyAxOS4xMTcgQyAxNy4zIDIxLjMxNyAxNy44IDIzLjQxNyAxOS4xIDI0LjgxNyBDIDIwLjIgMjYuMTE3IDIxLjkgMjYuNzE3IDIzLjggMjYuNzE3IEMgMjcuMSAyNi43MTcgMjkgMjQuNjE3IDI5IDI0LjYxNyBMIDI4LjggMjUuNjE3IEMgMjguNyAyNi4wMTcgMjkgMjYuNDE3IDI5LjQgMjYuNDE3IEwgMzIuOCAyNi40MTcgQyAzMy4zIDI2LjQxNyAzMy44IDI2LjAxNyAzMy45IDI1LjUxNyBMIDM1LjkgMTIuNzE3IEMgMzYgMTIuNTE3IDM1LjYgMTIuMTE3IDM1LjIgMTIuMTE3IFogTSAzMC4xIDE5LjMxNyBDIDI5LjcgMjEuNDE3IDI4LjEgMjIuOTE3IDI1LjkgMjIuOTE3IEMgMjQuOCAyMi45MTcgMjQgMjIuNjE3IDIzLjQgMjEuOTE3IEMgMjIuOCAyMS4yMTcgMjIuNiAyMC4zMTcgMjIuOCAxOS4zMTcgQyAyMy4xIDE3LjIxNyAyNC45IDE1LjcxNyAyNyAxNS43MTcgQyAyOC4xIDE1LjcxNyAyOC45IDE2LjExNyAyOS41IDE2LjcxNyBDIDMwIDE3LjQxNyAzMC4yIDE4LjMxNyAzMC4xIDE5LjMxNyBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwMzA4NyIgZD0iTSA1NS4xIDEyLjExNyBMIDUxLjQgMTIuMTE3IEMgNTEgMTIuMTE3IDUwLjcgMTIuMzE3IDUwLjUgMTIuNjE3IEwgNDUuMyAyMC4yMTcgTCA0My4xIDEyLjkxNyBDIDQzIDEyLjQxNyA0Mi41IDEyLjExNyA0Mi4xIDEyLjExNyBMIDM4LjQgMTIuMTE3IEMgMzggMTIuMTE3IDM3LjYgMTIuNTE3IDM3LjggMTMuMDE3IEwgNDEuOSAyNS4xMTcgTCAzOCAzMC41MTcgQyAzNy43IDMwLjkxNyAzOCAzMS41MTcgMzguNSAzMS41MTcgTCA0Mi4yIDMxLjUxNyBDIDQyLjYgMzEuNTE3IDQyLjkgMzEuMzE3IDQzLjEgMzEuMDE3IEwgNTUuNiAxMy4wMTcgQyA1NS45IDEyLjcxNyA1NS42IDEyLjExNyA1NS4xIDEyLjExNyBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA2Ny41IDQuOTE3IEwgNTkuNyA0LjkxNyBDIDU5LjIgNC45MTcgNTguNyA1LjMxNyA1OC42IDUuODE3IEwgNTUuNSAyNS43MTcgQyA1NS40IDI2LjExNyA1NS43IDI2LjQxNyA1Ni4xIDI2LjQxNyBMIDYwLjEgMjYuNDE3IEMgNjAuNSAyNi40MTcgNjAuOCAyNi4xMTcgNjAuOCAyNS44MTcgTCA2MS43IDIwLjExNyBDIDYxLjggMTkuNjE3IDYyLjIgMTkuMjE3IDYyLjggMTkuMjE3IEwgNjUuMyAxOS4yMTcgQyA3MC40IDE5LjIxNyA3My40IDE2LjcxNyA3NC4yIDExLjgxNyBDIDc0LjUgOS43MTcgNzQuMiA4LjAxNyA3My4yIDYuODE3IEMgNzIgNS42MTcgNzAuMSA0LjkxNyA2Ny41IDQuOTE3IFogTSA2OC40IDEyLjIxNyBDIDY4IDE1LjAxNyA2NS44IDE1LjAxNyA2My44IDE1LjAxNyBMIDYyLjYgMTUuMDE3IEwgNjMuNCA5LjgxNyBDIDYzLjQgOS41MTcgNjMuNyA5LjMxNyA2NCA5LjMxNyBMIDY0LjUgOS4zMTcgQyA2NS45IDkuMzE3IDY3LjIgOS4zMTcgNjcuOSAxMC4xMTcgQyA2OC40IDEwLjUxNyA2OC41IDExLjIxNyA2OC40IDEyLjIxNyBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA5MC43IDEyLjExNyBMIDg3IDEyLjExNyBDIDg2LjcgMTIuMTE3IDg2LjQgMTIuMzE3IDg2LjQgMTIuNjE3IEwgODYuMiAxMy42MTcgTCA4NS45IDEzLjIxNyBDIDg1LjEgMTIuMDE3IDgzLjMgMTEuNjE3IDgxLjUgMTEuNjE3IEMgNzcuNCAxMS42MTcgNzMuOSAxNC43MTcgNzMuMiAxOS4xMTcgQyA3Mi44IDIxLjMxNyA3My4zIDIzLjQxNyA3NC42IDI0LjgxNyBDIDc1LjcgMjYuMTE3IDc3LjQgMjYuNzE3IDc5LjMgMjYuNzE3IEMgODIuNiAyNi43MTcgODQuNSAyNC42MTcgODQuNSAyNC42MTcgTCA4NC4zIDI1LjYxNyBDIDg0LjIgMjYuMDE3IDg0LjUgMjYuNDE3IDg0LjkgMjYuNDE3IEwgODguMyAyNi40MTcgQyA4OC44IDI2LjQxNyA4OS4zIDI2LjAxNyA4OS40IDI1LjUxNyBMIDkxLjQgMTIuNzE3IEMgOTEuNCAxMi41MTcgOTEuMSAxMi4xMTcgOTAuNyAxMi4xMTcgWiBNIDg1LjUgMTkuMzE3IEMgODUuMSAyMS40MTcgODMuNSAyMi45MTcgODEuMyAyMi45MTcgQyA4MC4yIDIyLjkxNyA3OS40IDIyLjYxNyA3OC44IDIxLjkxNyBDIDc4LjIgMjEuMjE3IDc4IDIwLjMxNyA3OC4yIDE5LjMxNyBDIDc4LjUgMTcuMjE3IDgwLjMgMTUuNzE3IDgyLjQgMTUuNzE3IEMgODMuNSAxNS43MTcgODQuMyAxNi4xMTcgODQuOSAxNi43MTcgQyA4NS41IDE3LjQxNyA4NS43IDE4LjMxNyA4NS41IDE5LjMxNyBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA5NS4xIDUuNDE3IEwgOTEuOSAyNS43MTcgQyA5MS44IDI2LjExNyA5Mi4xIDI2LjQxNyA5Mi41IDI2LjQxNyBMIDk1LjcgMjYuNDE3IEMgOTYuMiAyNi40MTcgOTYuNyAyNi4wMTcgOTYuOCAyNS41MTcgTCAxMDAgNS42MTcgQyAxMDAuMSA1LjIxNyA5OS44IDQuOTE3IDk5LjQgNC45MTcgTCA5NS44IDQuOTE3IEMgOTUuNCA0LjkxNyA5NS4yIDUuMTE3IDk1LjEgNS40MTcgWiI+PC9wYXRoPjwvc3ZnPg==" alt="paypal" style="visibility: visible;">
</a>
<script>
(function(){

  $("#paypal_checkout_button-{{pay_id}}").click(function(){
    var params = moi.getPageStorage('product_params' +{{pay_id}});
    var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });
    if (ret.params.code !== 200) {
      return false
    }
    var product_selected = {
      product_id: params.product_id,
      sku_code: params.sku_code,
      quantity: params.quantity,
      data_from: moi.getUrlParam("data_from") || "{{data_from}}",
      property: ret.params.property
    }
    var product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
    moi.onEvent("paypalec_callback",{ payId: '{{pay_id}}'})
    var CREATE_URL = '/checkouts/payment/jhpay/ec?a_domain={{ payment.a_domain }}&a_domain_url={{ payment.a_domain_url }}&payment_id={{ payment.id }}&cart_param=' + product_cart_param + '&_ref=' + window.location.href;
    location.href = CREATE_URL
  })
{% comment %} 
function paypalInit(){

  paypal.Button.render({
    env: '{%if environment == 'prod' %}production{% else %}sandbox{% endif %}', // sandbox | production
    style: {
      tagline: false,
      height: 48,
      layout: 'vertical',  // horizontal | vertical
      size: 'responsive',    // medium | large | responsive
      shape: 'rect',      // pill | rect
      color: 'gold'       // gold | blue | silver | black
    },
    // Specify allowed and disallowed funding sources
    //
    // Options:
    // - paypal.FUNDING.CARD
    // - paypal.FUNDING.CREDIT
    // - paypal.FUNDING.ELV
    //paypal.FUNDING.CARD, paypal.FUNDING.CREDIT
    funding: {
      allowed: [paypal.FUNDING.CREDIT, paypal.FUNDING.CARD],
      disallowed: [paypal.FUNDING.ELV]
    },
    // Show the buyer a 'Pay Now' button in the checkout flow
    commit: true,
    onInit:function(data, actions){},
    // payment() is called when the button is clicked
    payment: function () {
      var params = moi.getPageStorage('product_params' +{{pay_id}});
      var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });
      if (ret.params.code !== 200) {
        return false
      }
      var product_selected = {
        product_id: params.product_id,
        sku_code: params.sku_code,
        quantity: params.quantity,
        data_from: moi.getUrlParam("data_from") || "{{data_from}}",
        property: ret.params.property
      }
      var product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
      moi.onEvent("paypalec_callback",{ payId: '{{pay_id}}'})
      // Set up a url on your server to create the payment
      var CREATE_URL = '/checkouts/payment/jhpay/ec?a_domain={{ payment.a_domain }}&a_domain_url={{ payment.a_domain_url }}&is_ajax=1&payment_id={{ payment.id }}&cart_param=' + product_cart_param + '&_ref=' + window.location.href;
      // Make a call to your server to set up the payment
      return paypal.request.post(CREATE_URL)
        .then(function (res) {
          if (res.status) {
            return res.data.TOKEN;
          }
          else {
            alert(res.data.L_LONGMESSAGE0);
            return false;
          }
        });
    },
    // onAuthorize() is called when the buyer approves the payment
    onAuthorize: function (data, actions) {
      return actions.redirect();
      location.href = data.returnUrl; return;
      alert(JSON.stringify(data));
      alert(JSON.stringify(actions));
      // Set up a url on your server to execute the payment
      var EXECUTE_URL = '/h-order-ECPayToken.html';
      // Set up the data you need to pass to your server
      var data = {
        paymentID: data.paymentID,
        payerID: data.payerID
      };
      // Make a call to your server to execute the payment
      //    return paypal.request.post(EXECUTE_URL, data)
      //      .then(function (res) {
      //        window.alert("Payment Complete!");
      //  });
    }
  }, '#paypal-button-container-{{pay_id}}');
}
  
    moi.createScript("https://www.paypalobjects.com/api/checkout.js",function(){
    if(window.paypal){
    paypalInit()
    }else{ 
      const timer = setInterval(()=>{
        if(window.paypal){
           paypalInit()
           clearInterval(timer)
        }
      },200)
    } 
    }) {% endcomment %}
})()

</script>
{%- endif -%}


{%- if payment.interface_type == 'paypal21payment' -%}
<a href="javascript:void(0);" class="paypal_checkout_button paypal_checkout_button-{{pay_id}}">
<img class="paypal-button-logo paypal-button-logo-pp paypal-button-logo-gold" src="" alt="pp" style="visibility: visible;">
<img class="paypal-button-logo paypal-button-logo-paypal paypal-button-logo-gold" src="" alt="paypal" style="visibility: visible;">
</a>
<script>
$('.paypal_checkout_button-{{pay_id}}').click(function(){
moi.onEvent("paypalec_callback",{ payId: "{{pay_id | default :'0'}}"})
var params = moi.getPageStorage('product_params' +{{pay_id}});
var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });
if (ret.params.code !== 200) {
return false
}
var product_selected = {
product_id: params.product_id,
sku_code: params.sku_code,
quantity: params.quantity,
data_from: moi.getUrlParam("data_from") || "{{data_from}}",
property: ret.params.property
}
var product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
var redirect_url = '/checkouts/payment/{{ payment.interface_type }}/ECPay?payment_id={{ payment.id }}&cart_param='+product_cart_param+'&_ref='+window.location.href;
location.href = redirect_url;
});
</script>
{%- endif -%}


{%- if payment.interface_type == 'paypal21' -%}
{%- if payment.interface_type_param.smart_button != 1 -%}
<a href="javascript:void(0);" class="paypal_checkout_button paypal_checkout_button-{{pay_id}}">
<img class="paypal-button-logo paypal-button-logo-pp paypal-button-logo-gold" src="" alt="pp" style="visibility: visible;">
<img class="paypal-button-logo paypal-button-logo-paypal paypal-button-logo-gold" src="" alt="paypal" style="visibility: visible;">
</a>
<script>
$('.paypal_checkout_button-{{pay_id}}').click(function(){
      moi.onEvent("paypalec_callback",{ payId: "{{pay_id | default :'0'}}"})
      var params = moi.getPageStorage('product_params' +{{pay_id}});
      var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });
      if (ret.params.code !== 200) {
        return false
      }
      var product_selected = {
            product_id: params.product_id,
            sku_code: params.sku_code,
            quantity: params.quantity,
            data_from: moi.getUrlParam("data_from") || "{{data_from}}",
            property: ret.params.property
        }
      var product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
      var redirect_url = '/checkouts/payment/{{ payment.interface_type }}/ECPay?payment_id={{ payment.id }}&cart_param='+product_cart_param+'&_ref='+window.location.href;
      location.href = redirect_url;
});
</script>
{%- else -%}
<style>.paypal-button-container{ margin:auto; width:100%;text-align:center  } .paypal-button-container .xcomponent-outlet{z-index:1;}#pp-message{min-width:250px !important; margin:auto;}</style>
<div id="paypal-button-container-{{pay_id}}" class="paypal-button-container"></div>
<script>
(function(){
var paypalURL = "https://www.paypal.com/sdk/js?client-id={%if payment.interface_type_param.is_test=="1" %}sb&buyer-country=US{% else %}{{ payment.interface_type_param.client_id }}{% endif %}&components=buttons,messages&commit=false&currency={{ currency.standard_code }}{% if payment.interface_type_param.authorize_payment == '1' %}&intent=authorize{% endif %}";
function paypalInit(){
  var test_show = '{{ payment.interface_type_param.authorize_payment }}';
  var paypal_redirect_url = '';
  paypal.Buttons({
    style: {
      height: 48,
      layout: 'horizontal',  // horizontal | vertical
    },
    onInit:function(data, actions){},
    createOrder: function (data, actions) {
      var params = moi.getPageStorage('product_params' +{{pay_id}});
      var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });

      if (ret.params.code !== 200) {
        return actions.reject();
      }
      var product_selected = {  
            product_id: params.product_id,
            sku_code: params.sku_code,
            quantity: params.quantity,
            data_from: moi.getUrlParam("data_from") || "{{data_from}}",
            property: ret.params.property

        }
      var product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
      moi.onEvent("paypalec_callback",{ payId: '{{pay_id}}'})
      return fetch('/checkouts/payment/paypal21/ECPay?is_ajax=1&payment_id={{ payment.id }}&cart_param='+product_cart_param+'&_ref='+window.location.href, {
        method: 'POST'
      }).then(function(res) {
        return res.json();
      }).then(function(data) {
        if(data.status)
        {
            paypal_redirect_url = data.data.return_url;
            return data.data.paypal_order_id;
        }
        else
        {
            alert(data.data.L_LONGMESSAGE0);
            return false;
        }
      });
    },
    onApprove: function (data, actions) {
        console.log(data);
        if(paypal_redirect_url!='')
        {
            location.href = paypal_redirect_url;
            return;
        }
      return actions.redirect();
      return fetch('/my-server/capture-order/' + data.orderID, {
        method: 'POST'
      }).then(function(res) {
        if (!res.ok) {
          alert('Something went wrong');
        }
      });
    }
  }).render('#paypal-button-container-{{pay_id}}');
}


    moi.createScript(paypalURL,function(){
      if(window.paypal){
    paypalInit()
    }else{ 
      const timer = setInterval(()=>{
        if(window.paypal){
           paypalInit()
           clearInterval(timer)
        }
      },200)
    }
    })
})()
  

</script>
{%- endif -%}
{%- endif -%}

{%- if payment.interface_type == 'paypal2' -%}
{%- if payment.interface_type_param.smart_button != 1 -%}
<a href="javascript:void(0);" class="paypal_checkout_button paypal_checkout_button-{{pay_id}}">
<img class="paypal-button-logo paypal-button-logo-pp paypal-button-logo-gold" src="" alt="pp" style="visibility: visible;">
<img class="paypal-button-logo paypal-button-logo-paypal paypal-button-logo-gold" src="" alt="paypal" style="visibility: visible;">
</a>
<script>
$('.paypal_checkout_button-{{pay_id}}').click(function(){
      moi.onEvent("paypalec_callback",{ payId: "{{pay_id | default :'0'}}"})
      var params = moi.getPageStorage('product_params' +{{pay_id}});
      var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });

      if (ret.params.code !== 200) {
        return false
      }
      var product_selected = {
            product_id: params.product_id,
            sku_code: params.sku_code,
            quantity: params.quantity,
            data_from: moi.getUrlParam("data_from") || "{{data_from}}",
            property: ret.params.property

        }
      var product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
      var redirect_url = '/checkouts/payment/{{ payment.interface_type }}/ECPay?payment_id={{ payment.id }}&cart_param='+product_cart_param+'&_ref='+window.location.href;
      location.href = redirect_url;
});
</script>
{%- else -%}
<style>.paypal-button-container{ margin:auto; width:100%;text-align:center  } .paypal-button-container .xcomponent-outlet{z-index:1;}#pp-message{min-width:250px !important; margin:auto;}</style>
<div id="paypal-button-container-{{pay_id}}" class="paypal-button-container"></div>
<script>
(function(){
var paypalURL = "https://www.paypal.com/sdk/js?client-id={%if payment.interface_type_param.is_test=="1" %}sb&buyer-country=US{% else %}{{ payment.apiInfo.client_id }}&merchant-id={{ payment.interface_type_param.merchant_id }}{% endif %}&components=buttons,messages&commit=false&currency={{ currency.standard_code }}{% if payment.interface_type_param.authorize_payment==1 %}&intent=authorize{% endif %}";



function paypalInit(){
  var paypal_redirect_url = '';
  paypal.Buttons({
    style: {
      height: 48,
      layout: 'horizontal',  // horizontal | vertical

    },
 
 
    createOrder: function (data, actions) {
      var params = moi.getPageStorage('product_params' +{{pay_id}});
      var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });


      if (ret.params.code !== 200) {
        return actions.reject();
      }
      var product_selected = {
            product_id: params.product_id,
            sku_code: params.sku_code,
            quantity: params.quantity,
            data_from: moi.getUrlParam("data_from") || "{{data_from}}",
            property: ret.params.property
      }
      var product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
      moi.onEvent("paypalec_callback",{ payId: '{{pay_id}}'})
      return fetch('/checkouts/payment/paypal2/ECPay?is_ajax=1&payment_id={{ payment.id }}&cart_param='+product_cart_param+'&_ref='+window.location.href, {
        method: 'POST'
      }).then(function(res) {
        return res.json();
      }).then(function(data) {
        if(data.status)
        {
            paypal_redirect_url = data.data.return_url;
            return data.data.paypal_order_id;
        }
        else
        {
            alert(data.data.L_LONGMESSAGE0);
            return false;
        }
      });
    },
    onApprove: function (data, actions) {
        console.log(data);
        if(paypal_redirect_url!='')
        {
            location.href = paypal_redirect_url;
            return;
        }
      return actions.redirect();
      return fetch('/my-server/capture-order/' + data.orderID, {
        method: 'POST'
      }).then(function(res) {
        if (!res.ok) {
          alert('Something went wrong');
        }
      });
    }
  }).render('#paypal-button-container-{{pay_id}}');
}


    moi.createScript(paypalURL,function(){
      if(window.paypal){
    paypalInit()
    }else{ 
      const timer = setInterval(()=>{
        if(window.paypal){
           paypalInit()
           clearInterval(timer)
        }
      },200)
    }
    })
})()
  

</script>
{%- endif -%}
{%- endif -%}

{%- if payment.interface_type == 'paypal' -%}
{%- if payment.interface_type_param.smart_button != 1 -%}
<a href="javascript:void(0);" class="paypal_checkout_button paypal_checkout_button-{{pay_id}}">
<img class="paypal-button-logo paypal-button-logo-pp paypal-button-logo-gold" src="" alt="pp" style="visibility: visible;">
<img class="paypal-button-logo paypal-button-logo-paypal paypal-button-logo-gold" src="" alt="paypal" style="visibility: visible;">
</a>
<script>
$('.paypal_checkout_button-{{pay_id}}').click(function(){
      moi.onEvent("paypalec_callback",{ payId: "{{pay_id | default :'0'}}"})
      var params = moi.getPageStorage('product_params' +{{pay_id}});
      var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });

      if (ret.params.code !== 200) {
        return false
      }
      var product_selected = {
            product_id: params.product_id,
            sku_code: params.sku_code,
            quantity: params.quantity,
            data_from: moi.getUrlParam("data_from") || "{{data_from}}",
            property: ret.params.property

        }
      var product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
      var redirect_url = '/checkouts/payment/{{ payment.interface_type }}/ECPay?payment_id={{ payment.id }}&cart_param='+product_cart_param+'&_ref='+window.location.href;
      location.href = redirect_url;
});
</script>
{%- else -%}
<style>.paypal-button-container .xcomponent-outlet{z-index:1;}.paypal-button-container{width: 100% !important;}</style>
<div class="paypal-button-container" id="paypal-button-container-{{pay_id}}"></div>
<script>
(function(){

  //Initialize payment
  function paypalInit(){
    paypal.Button.render({
        env: '{%if payment.interface_type_param.api_is_test == 1 %}sandbox{% else %}production{% endif %}', // sandbox | production
        style: {
        tagline:false,
        height: 48,
        layout: 'vertical',  // horizontal | vertical
        size:   'responsive',    // medium | large | responsive
        shape:  'rect',      // pill | rect
        color:  'gold'       // gold | blue | silver | black
        },
        // Specify allowed and disallowed funding sources
        //
        // Options:
        // - paypal.FUNDING.CARD
        // - paypal.FUNDING.CREDIT
        // - paypal.FUNDING.ELV
        //paypal.FUNDING.CARD, paypal.FUNDING.CREDIT 
        funding: {
            allowed: [paypal.FUNDING.CREDIT,paypal.FUNDING.CARD],
            disallowed: [paypal.FUNDING.ELV]
        },
        // Show the buyer a 'Pay Now' button in the checkout flow
        commit: false,
        // payment() is called when the button is clicked
        payment: function() {
            var params = moi.getPageStorage('product_params' +{{pay_id}});
            var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });

            if (ret.params.code !== 200) {
              return false
            }
            var product_selected = {
                  product_id: params.product_id,
                  sku_code: params.sku_code,
                  quantity: params.quantity,
                  data_from: moi.getUrlParam("data_from") || "{{data_from}}",
                  property: ret.params.property

              }
            var product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
            moi.onEvent("paypalec_callback",{ payId: '{{pay_id}}'})
            // Set up a url on your server to create the payment
            var CREATE_URL = '/checkouts/payment/paypal/ECPay?is_ajax=1&payment_id={{ payment.id }}&cart_param='+product_cart_param+'&_ref='+window.location.href;
            // Make a call to your server to set up the payment
            return paypal.request.post(CREATE_URL)
                .then(function(res) {
                    if(res.status)
                    {
                        return res.data.TOKEN;
                    }
                    else
                    {
                        alert(res.data.L_LONGMESSAGE0);
                        return false;
                    }
                });
        },
        // onAuthorize() is called when the buyer approves the payment
        onAuthorize: function(data, actions) {
            return actions.redirect();
            location.href=data.returnUrl;return;
            alert(JSON.stringify(data));
            alert(JSON.stringify(actions));
            // Set up a url on your server to execute the payment
            var EXECUTE_URL = '/h-order-ECPayToken.html';
            // Set up the data you need to pass to your server
            var data = {
                paymentID: data.paymentID,
                payerID: data.payerID
            };
            // Make a call to your server to execute the payment
        //    return paypal.request.post(EXECUTE_URL, data)
          //      .then(function (res) {
            //        window.alert("Payment Complete!");
              //  });
        }
    }, '#paypal-button-container-{{pay_id}}');
  }

  moi.createScript("https://www.paypalobjects.com/api/checkout.js",function(){
       if(window.paypal){
    paypalInit()
    }else{ 
      const timer = setInterval(()=>{
        if(window.paypal){
           paypalInit()
           clearInterval(timer)
        }
      },200)
    }
    })

})()
</script>
{%- endif -%}
{%- endif -%}


{%- if payment.interface_type == 'paypalpool' -%}
    {%- if payment.interface_type_param.smart_button != 1 -%}
        <a href="javascript:void(0);" class="paypal_checkout_button paypal_checkout_button-{{pay_id}}">
            <img class="paypal-button-logo paypal-button-logo-pp paypal-button-logo-gold" src="" alt="pp" style="visibility: visible;">
            <img class="paypal-button-logo paypal-button-logo-paypal paypal-button-logo-gold" src=" xNyA2LjcgMTkuMzE3IDcuMyAxOS4zMTcgTCA5LjggMTkuMzE3IEMgMTQuOSAxOS4zMTcgMTcuOSAxNi44MTcgMTguNyAxMS45MTcgQyAxOSA5LjgxNyAxOC43IDguMTE3IDE3LjcgNi45MTcgQyAxNi42IDUuNjE3IDE0LjYgNC45MTcgMTIgNC45MTcgWiBNIDEyLjkgMTIuMjE3IEMgMTIuNSAxNS4wMTcgMTAuMyAxNS4wMTcgOC4zIDE1LjAxNyBMIDcuMSAxNS4wMTcgTCA3LjkgOS44MTcgQyA3LjkgOS41MTcgOC4yIDkuMzE3IDguNSA5LjMxNyBMIDkgOS4zMTcgQyAxMC40IDkuMzE3IDExLjcgOS4zMTcgMTIuNCAxMC4xMTcgQyAxMi45IDEwLjUxNyAxMy4xIDExLjIxNyAxMi45IDEyLjIxNyBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwMzA4NyIgZD0iTSAzNS4yIDEyLjExNyBMIDMxLjUgMTIuMTE3IEMgMzEuMiAxMi4xMTcgMzAuOSAxMi4zMTcgMzAuOSAxMi42MTcgTCAzMC43IDEzLjYxNyBMIDMwLjQgMTMuMjE3IEMgMjkuNiAxMi4wMTcgMjcuOCAxMS42MTcgMjYgMTEuNjE3IEMgMjEuOSAxMS42MTcgMTguNCAxNC43MTcgMTcuNyAxOS4xMTcgQyAxNy4zIDIxLjMxNyAxNy44IDIzLjQxNyAxOS4xIDI0LjgxNyBDIDIwLjIgMjYuMTE3IDIxLjkgMjYuNzE3IDIzLjggMjYuNzE3IEMgMjcuMSAyNi43MTcgMjkgMjQuNjE3IDI5IDI0LjYxNyBMIDI4LjggMjUuNjE3IEMgMjguNyAyNi4wMTcgMjkgMjYuNDE3IDI5LjQgMjYuNDE3IEwgMzIuOCAyNi40MTcgQyAzMy4zIDI2LjQxNyAzMy44IDI2LjAxNyAzMy45IDI1LjUxNyBMIDM1LjkgMTIuNzE3IEMgMzYgMTIuNTE3IDM1LjYgMTIuMTE3IDM1LjIgMTIuMTE3IFogTSAzMC4xIDE5LjMxNyBDIDI5LjcgMjEuNDE3IDI4LjEgMjIuOTE3IDI1LjkgMjIuOTE3IEMgMjQuOCAyMi45MTcgMjQgMjIuNjE3IDIzLjQgMjEuOTE3IEMgMjIuOCAyMS4yMTcgMjIuNiAyMC4zMTcgMjIuOCAxOS4zMTcgQyAyMy4xIDE3LjIxNyAyNC45IDE1LjcxNyAyNyAxNS43MTcgQyAyOC4xIDE1LjcxNyAyOC45IDE2LjExNyAyOS41IDE2LjcxNyBDIDMwIDE3LjQxNyAzMC4yIDE4LjMxNyAzMC4xIDE5LjMxNyBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwMzA4NyIgZD0iTSA1NS4xIDEyLjExNyBMIDUxLjQgMTIuMTE3IEMgNTEgMTIuMTE3IDUwLjcgMTIuMzE3IDUwLjUgMTIuNjE3IEwgNDUuMyAyMC4yMTcgTCA0My4xIDEyLjkxNyBDIDQzIDEyLjQxNyA0Mi41IDEyLjExNyA0Mi4xIDEyLjExNyBMIDM4LjQgMTIuMTE3IEMgMzggMTIuMTE3IDM3LjYgMTIuNTE3IDM3LjggMTMuMDE3IEwgNDEuOSAyNS4xMTcgTCAzOCAzMC41MTcgQyAzNy43IDMwLjkxNyAzOCAzMS41MTcgMzguNSAzMS41MTcgTCA0Mi4yIDMxLjUxNyBDIDQyLjYgMzEuNTE3IDQyLjkgMzEuMzE3IDQzLjEgMzEuMDE3IEwgNTUuNiAxMy4wMTcgQyA1NS45IDEyLjcxNyA1NS42IDEyLjExNyA1NS4xIDEyLjExNyBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA2Ny41IDQuOTE3IEwgNTkuNyA0LjkxNyBDIDU5LjIgNC45MTcgNTguNyA1LjMxNyA1OC42IDUuODE3IEwgNTUuNSAyNS43MTcgQyA1NS40IDI2LjExNyA1NS43IDI2LjQxNyA1Ni4xIDI2LjQxNyBMIDYwLjEgMjYuNDE3IEMgNjAuNSAyNi40MTcgNjAuOCAyNi4xMTcgNjAuOCAyNS44MTcgTCA2MS43IDIwLjExNyBDIDYxLjggMTkuNjE3IDYyLjIgMTkuMjE3IDYyLjggMTkuMjE3IEwgNjUuMyAxOS4yMTcgQyA3MC40IDE5LjIxNyA3My40IDE2LjcxNyA3NC4yIDExLjgxNyBDIDc0LjUgOS43MTcgNzQuMiA4LjAxNyA3My4yIDYuODE3IEMgNzIgNS42MTcgNzAuMSA0LjkxNyA2Ny41IDQuOTE3IFogTSA2OC40IDEyLjIxNyBDIDY4IDE1LjAxNyA2NS44IDE1LjAxNyA2My44IDE1LjAxNyBMIDYyLjYgMTUuMDE3IEwgNjMuNCA5LjgxNyBDIDYzLjQgOS41MTcgNjMuNyA5LjMxNyA2NCA5LjMxNyBMIDY0LjUgOS4zMTcgQyA2NS45IDkuMzE3IDY3LjIgOS4zMTcgNjcuOSAxMC4xMTcgQyA2OC40IDEwLjUxNyA2OC41IDExLjIxNyA2OC40IDEyLjIxNyBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA5MC43IDEyLjExNyBMIDg3IDEyLjExNyBDIDg2LjcgMTIuMTE3IDg2LjQgMTIuMzE3IDg2LjQgMTIuNjE3IEwgODYuMiAxMy42MTcgTCA4NS45IDEzLjIxNyBDIDg1LjEgMTIuMDE3IDgzLjMgMTEuNjE3IDgxLjUgMTEuNjE3IEMgNzcuNCAxMS42MTcgNzMuOSAxNC43MTcgNzMuMiAxOS4xMTcgQyA3Mi44IDIxLjMxNyA3My4zIDIzLjQxNyA3NC42IDI0LjgxNyBDIDc1LjcgMjYuMTE3IDc3LjQgMjYuNzE3IDc5LjMgMjYuNzE3IEMgODIuNiAyNi43MTcgODQuNSAyNC42MTcgODQuNSAyNC42MTcgTCA4NC4zIDI1LjYxNyBDIDg0LjIgMjYuMDE3IDg0LjUgMjYuNDE3IDg0LjkgMjYuNDE3IEwgODguMyAyNi40MTcgQyA4OC44IDI2LjQxNyA4OS4zIDI2LjAxNyA4OS40IDI1LjUxNyBMIDkxLjQgMTIuNzE3IEMgOTEuNCAxMi41MTcgOTEuMSAxMi4xMTcgOTAuNyAxMi4xMTcgWiBNIDg1LjUgMTkuMzE3IEMgODUuMSAyMS40MTcgODMuNSAyMi45MTcgODEuMyAyMi45MTcgQyA4MC4yIDIyLjkxNyA3OS40IDIyLjYxNyA3OC44IDIxLjkxNyBDIDc4LjIgMjEuMjE3IDc4IDIwLjMxNyA3OC4yIDE5LjMxNyBDIDc4LjUgMTcuMjE3IDgwLjMgMTUuNzE3IDgyLjQgMTUuNzE3IEMgODMuNSAxNS43MTcgODQuMyAxNi4xMTcgODQuOSAxNi43MTcgQyA4NS41IDE3LjQxNyA4NS43IDE4LjMxNyA4NS41IDE5LjMxNyBaIj48L3BhdGg+PHBhdGggZmlsbD0iIzAwOWNkZSIgZD0iTSA5NS4xIDUuNDE3IEwgOTEuOSAyNS43MTcgQyA5MS44IDI2LjExNyA5Mi4xIDI2LjQxNyA5Mi41IDI2LjQxNyBMIDk1LjcgMjYuNDE3IEMgOTYuMiAyNi40MTcgOTYuNyAyNi4wMTcgOTYuOCAyNS41MTcgTCAxMDAgNS42MTcgQyAxMDAuMSA1LjIxNyA5OS44IDQuOTE3IDk5LjQgNC45MTcgTCA5NS44IDQuOTE3IEMgOTUuNCA0LjkxNyA5NS4yIDUuMTE3IDk1LjEgNS40MTcgWiI+PC9wYXRoPjwvc3ZnPg==" alt="paypal" style="visibility: visible;">
        </a>
        <script>
$('.paypal_checkout_button-{{pay_id}}').click(function(){
      moi.onEvent("paypalec_callback",{ payId: "{{pay_id | default :'0'}}"})
      var params = moi.getPageStorage('product_params' +{{pay_id}});
      var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });

      if (ret.params.code !== 200) {
        return false
      }
      var product_selected = {
            product_id: params.product_id,
            sku_code: params.sku_code,
            quantity: params.quantity,
            data_from: moi.getUrlParam("data_from") || "{{data_from}}",
            property: ret.params.property

        }
      var product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
      var redirect_url = '/checkouts/payment/{{ payment.interface_type }}/ECPay?payment_id={{ payment.id }}&cart_param='+product_cart_param+'&_ref='+window.location.href;
      location.href = redirect_url;
});
</script>
    {%- else -%}
        <style>.paypal-button-container{ margin:auto; width:100%;text-align:center  } .paypal-button-container .xcomponent-outlet{z-index:1;}#pp-message{min-width:250px !important; margin:auto;}</style>
        <div id="paypal-button-container-{{pay_id}}" class="paypal-button-container"></div>
        <script>
(function(){
//var paypalURL = "https://www.paypal.com/sdk/js?client-id=sb&buyer-country=US&components=buttons,messages&commit=false&currency={{ currency.standard_code }}";
var paypalURL = "https://www.paypal.com/sdk/js?client-id={%if payment.apiInfo.interface_type_param.is_test=="1" %}sb&buyer-country=US{% else %}{{ payment.apiInfo.interface_type_param.client_id }}{% endif %}&components=buttons,messages&commit=false&currency={{ currency.standard_code }}";
function paypalInit(){
  var paypal_redirect_url = '';
  paypal.Buttons({
    style: {
      height: 48,
      layout: 'vertical',  // horizontal | vertical

    },
    createOrder: function (data, actions) {
      var params = moi.getPageStorage('product_params' +{{pay_id}});
      var ret = moi.onEvent("payVerified", { property: [],product: params, code: 200 });

      if (ret.params.code !== 200) {
        return actions.reject();
      }
      var product_selected = {
            product_id: params.product_id,
            sku_code: params.sku_code,
            quantity: params.quantity,
            data_from: moi.getUrlParam("data_from") || "{{data_from}}",
            property: ret.params.property

        }
      var product_cart_param = encodeURIComponent(JSON.stringify(product_selected));
      moi.onEvent("paypalec_callback",{ payId: '{{pay_id}}'})
      return fetch('/checkouts/payment/paypalpool/ECPay?is_ajax=1&payment_id={{ payment.id }}&cart_param='+product_cart_param+'&_ref='+window.location.href, {
        method: 'POST'
      }).then(function(res) {
        return res.json();
      }).then(function(data) {
        if(data.status)
        {
            paypal_redirect_url = data.data.return_url;
            return data.data.paypal_order_id;
        }
        else
        {
            alert(data.data.L_LONGMESSAGE0);
            return false;
        }
      });
    },
    onApprove: function (data, actions) {
        console.log(data);
        if(paypal_redirect_url!='')
        {
            location.href = paypal_redirect_url;
            return;
        }
      return actions.redirect();
      return fetch('/my-server/capture-order/' + data.orderID, {
        method: 'POST'
      }).then(function(res) {
        if (!res.ok) {
          alert('Something went wrong');
        }
      });
    }
  }).render('#paypal-button-container-{{pay_id}}');
}


    moi.createScript(paypalURL,function(){
      if(window.paypal){
    paypalInit()
    }else{
      const timer = setInterval(()=>{
        if(window.paypal){
           paypalInit()
           clearInterval(timer)
        }
      },200)
    }
    })
})()


</script>
{%- endif -%}
{%- endif -%}